<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<title>Mr Hotels - 餐品预定</title>
	<!--/tags -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="" />
	<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}">
	<link rel="stylesheet" th:href="@{/iconfont.css}">
	<!--//tags -->
	<link th:href="@{/css/web_page/bootstrap.css}" rel="stylesheet" type="text/css" media="all">
	<link th:href="@{/css/web_page/style3.css}" rel="stylesheet" type="text/css" media="all">
	<link th:href="@{/css/web_page/font-awesome.css}" rel="stylesheet">
	<!--pop-up-box-->
	<link th:href="@{/css/web_page/popuo-box.css}" rel="stylesheet" type="text/css" media="all" />
	<!--//pop-up-box-->
	<!-- price range -->
	<link rel="stylesheet" type="text/css" th:href="@{/css/web_page/jquery-ui1.css}">
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script th:src="@{/js/web_page/jquery-1.11.0.min.js}"></script>
	<!-- Custom Theme files -->
	<link th:href="@{/css/web_page/style.css}" rel="stylesheet" type="text/css" media="all"/>
	<link th:href="@{/css/web_page/style1.css}" rel="stylesheet" type="text/css" media="all"/>
	<link th:href="@{/css/web_page/animate.css}" rel="stylesheet" type="text/css" media="all">
	<!-- fonts -->
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800" rel="stylesheet">
	<script th:src="@{/js/web_page/wow.min.js}"></script>
	<script th:src="@{/js/web_page/modernizr.js}"></script>
</head>

<body>
<!--header start here-->
<div th:replace="web_page/public_page.html::#header"></div>
<!--header end here-->
	<!-- top Products -->
	<div class="ads-grid">
		<div class="container">
			<!-- tittle heading -->
			<h3 class="tittle-w3l">餐 品 列 表
				<span class="heading-style">
					<!--<i></i>
					<i></i>
					<i></i>-->
				</span>
			</h3>
			<!-- //product left -->
			<input type="hidden" th:value="${session.clientUser}" id="user">
			<!-- product right -->
			<div class="side-bar col-md-12">
				<div class="search-hotel">
					<button id="buyCarBtn" class="layui-icon layui-icon-cart layui-btn" style="float:right;height:39px;background-color:#1accfd;font-size: 25px;margin-top: 43px;"></button>
					<h3 class="agileits-sear-head" style="text-align: center;">搜 索 餐 品</h3>
					<form action="productPage" method="post" style="width: 550px;margin: 0 auto;">
						<input type="search" placeholder="餐 品 名" name="name" required="" style="width: 400px;color: #555">
						<input type="submit" value="搜索" style="color: white;width: 80px;">
					</form>
				</div>
			</div>
			<div class="agileinfo-ads-display col-md-12 w3l-rightpro">
				<div class="wrapper">
					<!-- first section -->
					<div class="product-sec1">
						<div class="col-xs-4 product-men" th:each="product:${pageInfo.list}" style="margin: 10px 0">
							<div class="men-pro-item simpleCart_shelfItem">
								<div class="men-thumb-item">
									<img th:src="${application.showPath+product.picture}" alt="" style="width: 100px;height: 100px;">
								</div>
								<div class="item-info-product">
									<h4>
										<a href="single.html" th:text="${product.name}"></a>
									</h4>
									<div class="info-product-price">
										<span class="item_price">¥[[${product.price}/100]]</span>
										<!--<del>$1020.00</del>-->
									</div>
									<input type="hidden" th:value="${product.id}">
									<input type="hidden" th:value="${product.type}">
									<div class="snipcart-details top_brand_home_details item_add single-item hvr-outline-out">
										<button th:if="${product.type == 0 || product.type == 1 && product.count > 0}" class="btn btn-primary btn-lg button" data-toggle="modal" data-target="#myModal" style="font-size: 16px;">加 入 餐 品 车</button>
										<button th:if="${product.type == 1 && product.count == 0}" class="btn btn-lg button" disabled="disabled" data-toggle="modal" data-target="#myModal" style="background-color: #c9c9c9;font-size: 16px;">该商品已售罄</button>
									</div>
								</div>
							</div>
						</div>
						<div class="clearfix"></div>
					</div>

					<div class="modal-footer no-margin-top">
						<!--<div class="col-md-6">
							当前第 [[${pageInfo.pageNum}]]页,共 [[${pageInfo.pages}]] 页.一共 [[${pageInfo.total}]] 条记录
						</div>-->
						<ul class="pagination pull-right no-margin">
							<li th:if="${pageInfo.hasPreviousPage}">
								<a th:href="'productPage?pageNum=1'">首页</a>
							</li>

							<li class="prev" th:if="${pageInfo.hasPreviousPage}">
								<a th:href="'productPage?pageNum='+${pageInfo.prePage}">
									<span aria-hidden="true">&laquo;</span>
								</a>
							</li>
							<!--遍历条数-->
							<li th:each="nav:${pageInfo.navigatepageNums}">
								<a th:href="'productPage?pageNum='+${nav}" th:text="${nav}" th:if="${nav != pageInfo.pageNum}"></a>
								<span style="font-weight: bold;background: #6faed9;" th:if="${nav == pageInfo.pageNum}" th:text="${nav}" ></span>
							</li>

							<li class="next" th:if="${pageInfo.hasNextPage}">
								<a th:href="'productPage?pageNum='+${pageInfo.nextPage}">
									<span aria-hidden="true">&raquo;</span>
								</a>
							</li>

							<li>
								<a th:href="'productPage?pageNum='+${pageInfo.pages}">尾页</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- //product right -->
		</div>
	</div>
	<!-- //top products -->
<!--footer start here-->
<div th:replace="web_page/public_page.html::#footer"></div>
<!--footer end here-->
<!--copy-right start here-->
<div th:replace="web_page/public_page.html::#copy-right"></div>
<!--copy-right end here-->
	<!-- js-files -->
	<!-- jquery -->
	<script th:src="@{/js/web_page/jquery-2.1.4.min.js}"></script>
	<!-- //jquery -->

	<!-- popup modal (for signin & signup)-->
	<script th:src="@{/js/web_page/jquery.magnific-popup.js}"></script>
	<script>
		$(document).ready(function () {
			$('.popup-with-zoom-anim').magnificPopup({
				type: 'inline',
				fixedContentPos: false,
				fixedBgPos: true,
				overflowY: 'auto',
				closeBtnInside: true,
				preloader: false,
				midClick: true,
				removalDelay: 300,
				mainClass: 'my-mfp-zoom-in'
			});

		});
		$(document).ready(function(){
			$("#buyCarBtn").click(function () {
				layui.use('layer',function () {
					var layer = layui.layer;
					layer.closeAll();
					layer.open({
						type: 2,
						title: '餐 品 车',
						shadeClose: true,
						tipsMore:false,
						shade: false,
						/*maxmin: true, //开启最大化最小化按钮*/
						area: ['600px', '400px'],
						content: 'skipBuyCar'/*?name='+name+'&price='+price*100+'&proId='+id+'&proType='+type*/
					});
				})
			})
			$(".button").click(function () {
				var user = $("#user").val();
				if (user == null || user == ""){
					location.href="webLogin";
				}else{
					var name = $(this).parent().parent().find("a:first").text();
					var price2 = $(this).parent().parent().find("span:first").text();
					var price = price2.substring(1);
					var id = $(this).parent().parent().find("input:first").val();
					var type = $(this).parent().parent().find("input").eq(1).val();
					var url = "addBuyCar?name="+name+"&price="+price*100+"&proId="+id+"&proType="+type;
					$.getJSON(url,function (data) {
						if (data.result == "success"){
							layui.use('layer',function () {
									var layer = layui.layer;
									layer.closeAll();
									layer.open({
										type: 2,
										title: '餐 品 车',
										shadeClose: true,
										tipsMore:false,
										shade: false,
										/*maxmin: true, //开启最大化最小化按钮*/
										area: ['600px', '400px'],
										content: 'skipBuyCar'/*?name='+name+'&price='+price*100+'&proId='+id+'&proType='+type*/
									});
							})
						}
					})
                }
			})
		});
	</script>
	<script th:src="@{/lib/layui/layui.js}"></script>

	<!-- cart-js -->
	<script th:src="@{/js/web_page/minicart.js}"></script>
	<script>
		paypalm.minicartk.render(); //use only unique class names other than paypal1.minicart1.Also Replace same class name in css and minicart.min.js

		paypalm.minicartk.cart.on('checkout', function (evt) {
			var items = this.items(),
				len = items.length,
				total = 0,
				i;

			// Count the number of each item in the cart
			for (i = 0; i < len; i++) {
				total += items[i].get('quantity');
			}

			if (total < 3) {
				alert('The minimum order quantity is 3. Please add more to your shopping cart before checking out');
				evt.preventDefault();
			}
		});
	</script>
	<!-- //cart-js -->

	<!-- price range (top products) -->
	<script th:src="@{/js/web_page/jquery-ui.js}"></script>
	<script>
		//<![CDATA[ 
		$(window).load(function () {
			$("#slider-range").slider({
				range: true,
				min: 0,
				max: 9000,
				values: [50, 6000],
				slide: function (event, ui) {
					$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
				}
			});
			$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));

		}); //]]>
	</script>
	<!-- //price range (top products) -->

	<!-- flexisel (for special offers) -->
	<script th:src="@{/js/web_page/jquery.flexisel.js}"></script>
	<script>
		$(window).load(function () {
			$("#flexiselDemo1").flexisel({
				visibleItems: 3,
				animationSpeed: 1000,
				autoPlay: true,
				autoPlaySpeed: 3000,
				pauseOnHover: true,
				enableResponsiveBreakpoints: true,
				responsiveBreakpoints: {
					portrait: {
						changePoint: 480,
						visibleItems: 1
					},
					landscape: {
						changePoint: 640,
						visibleItems: 2
					},
					tablet: {
						changePoint: 768,
						visibleItems: 2
					}
				}
			});

		});
	</script>
	<!-- //flexisel (for special offers) -->

	<!-- password-script -->
	<script>
		window.onload = function () {
			document.getElementById("password1").onchange = validatePassword;
			document.getElementById("password2").onchange = validatePassword;
		}

		function validatePassword() {
			var pass2 = document.getElementById("password2").value;
			var pass1 = document.getElementById("password1").value;
			if (pass1 != pass2)
				document.getElementById("password2").setCustomValidity("Passwords Don't Match");
			else
				document.getElementById("password2").setCustomValidity('');
			//empty string means no validation error
		}
	</script>
	<!-- //password-script -->

	<!-- smoothscroll -->
	<script th:src="@{/js/web_page/SmoothScroll.min.js}"></script>
	<!-- //smoothscroll -->

	<!-- start-smooth-scrolling -->
	<script th:src="@{/js/web_page/move-top.js}"></script>
	<script th:src="@{/js/web_page/easing.js}"></script>
	<script>
		jQuery(document).ready(function ($) {
			$(".scroll").click(function (event) {
				event.preventDefault();

				$('html,body').animate({
					scrollTop: $(this.hash).offset().top
				}, 1000);
			});
		});
	</script>
	<!-- //end-smooth-scrolling -->

	<!-- smooth-scrolling-of-move-up -->
	<script>
		$(document).ready(function () {
			/*
			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
			};
			*/
			$().UItoTop({
				easingType: 'easeOutQuart'
			});

		});
	</script>
	<!-- //smooth-scrolling-of-move-up -->

	<!-- for bootstrap working -->
	<script th:src="@{/js/web_page/bootstrap.js}"></script>
	<!-- //for bootstrap working -->
	<!-- //js-files -->

</body>

</html>